{% extends 'base.html' %} {% load staticfiles %} {% block title %}网络设备{% endblock %} {% block css %}

<!-- DataTables -->
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> {% endblock %} {% block content %}

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
       网络设备管理
      </h1>
  <ol class="breadcrumb">
    <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">网络设备管理</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <form action={% url 'networkdevice' %} method="get">
    <div class="form-group">
      <div class="row">
        <div class="col-xs-2">
          <label for="search">固资编号</label>
          <textarea id='name' rows='1' class="form-control" name='name'></textarea>
        </div>
        <div class="col-xs-2">
          <label for="search">SN</label>
          <textarea id='sn' rows='1' class="form-control" name='sn'></textarea>
        </div>
        <div class="col-xs-4">
          <label for="search">机房</label>
          <input type="text" class="form-control" name='idc'>
        </div>
        <div class="col-xs-2">
          <label for="search">机柜</label>
          <input type="text" class="form-control" name='cabinet'>
        </div>
        <div class="col-xs-2">
          <label for="search">业务线</label>
          <select class="form-control" name='business_unit' id='business_unit'>
                    <option selected value></option>
                    <option value='0'>领骏</option>
                    <option value='1'>驰联</option>
                  </select>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-2">
          <label for="search">Hostname</label>
          <input type="text" class="form-control" name='hostname'>
        </div>
        <div class="col-xs-2">
          <label for="search">型号</label>
          <input type="text" class="form-control" name='modelnumber'>
        </div>
        <div class="col-xs-2">
          <label for="search">厂商</label>
          <input type="text" class="form-control" name='manufacturer'>
        </div>
        <div class="col-xs-2">
          <label for="search">状态</label>
          <select class="form-control" name='status' id='status'>
                    <option selected value></option>
                    <option value='0'>运营</option>
                    <option value='1'>闲置</option>
                    <option value='2'>待启用</option>
                    <option value='3'>故障</option>
                    <option value='4'>备用</option>
                  </select>
        </div>
        <div class="col-xs-2">
          <label for="search">管理IP</label>
          <input type="text" class="form-control" name='manage_ip'>
        </div>
        <div class="col-xs-2">
          <label for="search">维护人</label>
          <input type="text" class="form-control" name='operation'>
        </div>
      </div>
    </div>
    <p style=" margin:0 auto; text-align:center;">
      <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
    </p>
  </form>
  <div class="row">
    <div class="col-xs-12">
      <div>
        <label class="checkbox-inline">
          固资编号<input type="checkbox" class="toggle-vis" data-column="0" checked="checked"/>
          </label>
        <label class="checkbox-inline">
          SN<input type="checkbox" class="toggle-vis" data-column="1" checked="checked"/>
          </label>
        <label class="checkbox-inline">
          Hostname<input type="checkbox" class="toggle-vis" data-column="2" checked="checked"/>
          </label>
        <label class="checkbox-inline">
          业务线<input type="checkbox" class="toggle-vis" data-column="3"/>
          </label>
        <label class="checkbox-inline">
           厂商<input type="checkbox" class="toggle-vis" data-column="4" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           型号<input type="checkbox" class="toggle-vis" data-column="5" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           状态<input type="checkbox" class="toggle-vis" data-column="6" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           类型<input type="checkbox" class="toggle-vis" data-column="7"/>
           </label>
        <label class="checkbox-inline">
           机房<input type="checkbox" class="toggle-vis" data-column="8"/>
           </label>
        <label class="checkbox-inline">
           管理单元<input type="checkbox" class="toggle-vis" data-column="9" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           机柜<input type="checkbox" class="toggle-vis" data-column="10" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           设备高度<input type="checkbox" class="toggle-vis" data-column="11"/>
           </label>
        <label class="checkbox-inline">
           管理IP<input type="checkbox" class="toggle-vis" data-column="12" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           用途<input type="checkbox" class="toggle-vis" data-column="13"/>
           </label>
        <label class="checkbox-inline">
           维护人<input type="checkbox" class="toggle-vis" data-column="14" checked="checked"/>
           </label>
        <label class="checkbox-inline">
           备注<input type="checkbox" class="toggle-vis" data-column="15"/>
           </label>
      </div>
      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <button type="submit" class="btn btn-default pull-right" onclick="window.open( {%url 'networkdeviceimport' %} )">网络设备导入</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="display table table-bordered table-striped">
            <thead>
              <tr>
                <th>固资编号</th>
                <th>SN</th>
                <th>Hostname</th>
                <th>业务线</th>
                <th>厂商</th>
                <th>型号</th>
                <th>状态</th>
                <th>类型</th>
                <th>机房</th>
                <th>管理单元</th>
                <th>机柜</th>
                <th>设备高度</th>
                <th>管理IP</th>
                <th>用途</th>
                <th>维护人</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              {% for asset in assets %}
              <tr>
                <td><a href="{% url 'networkdevicedetail' asset.id %}" target=_blank>{{ asset.name }}</td>
                  <td>{{ asset.sn }}</td>
                  <td>{{ asset.hostname|default:asset.name }}</td>
                  <td>{{ asset.get_business_unit_display|default_if_none:"-" }}</td>
                  <td>{{ asset.manufacturer }}</td>
                  <td>{{ asset.modelnumber }}</td>
                    {% if asset.status == 0 %}
                      <td><label class="label label-success">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 1 %}
                      <td><label class="label label-warning">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 2 %}
                      <td><label class="label label-default">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 3 %}
                      <td><label class="label label-danger">{{ asset.get_status_display }}</label></td>
                    {% elif asset.status == 4 %}
                      <td><label class="label label-info">{{ asset.get_status_display }}</label></td>
                    {% endif %}
                  <td>{{ asset.get_networkdevice_type_display }}</td>  
                  <td>{{ asset.idc|default:"" }}</td>
                  <td>{{ asset.machineRoom|default:"" }}</td>
                  <td>{{ asset.cabinet|default:"" }}</td>
                  <td>{{ asset.high|default:"" }}</td>
                  <td>{{ asset.manage_ip|default:"" }}</td>
                  <td>{{ asset.application|default:"" }}</td>
                  <td>{{ asset.operation|default:"" }}</td>
                  <td>{{ asset.memo }}</td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}

            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <script src="../static/js/myjs.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/buttons.dataTables.min.css' %}">
    <!-- page script -->
    <script>
    $(document).ready(function() {
    $('#assets_table').DataTable( {
        dom: 'lBfrtip',
        buttons: [
        {
            extend: 'excel',
            text: '导出当前页',
            exportOptions: {
                columns: ':visible',
                modifier: {
                    page: 'current'
                }
            }
        },
        {
            extend: 'excel',
            text: '导出所有',
            exportOptions: {
                columns: ':visible',
            }    
        }
    ],
    "columnDefs": [
    {
    "targets": [ 3 ],
    "visible": false,
    },  
    {
    "targets": [ 7 ],
    "visible": false,
    },
    {
    "targets": [ 8 ],
    "visible": false
  },
    {
    "targets": [ 11 ],
    "visible": false
  },
    {
    "targets": [ 13 ],
    "visible": false
  },
    {
    "targets": [ 15 ],
    "visible": false
    }
  ]
    } );
    var table = $('#assets_table').DataTable()
    $('input.toggle-vis').on('change', function (e) {
            e.preventDefault();
            // Get the column API object
            var column = table.column( $(this).attr('data-column') );     
            // Toggle the visibility
            column.visible( ! column.visible() );
        } );
} );
    </script>
<script>
  var name = getUrlParameter('name');
  $("#name").val(name);
  var sn = getUrlParameter('sn');
  $("#sn").val(sn);
  var idc = getUrlParameter('idc');
  $("input[name='idc']").val(idc);
  var cabinet = getUrlParameter('cabinet');
  $("input[name='cabinet']").val(cabinet);
  var business_unit = getUrlParameter('business_unit');
  $("#business_unit").val(business_unit);
  var modelnumber = getUrlParameter('modelnumber');
  $("input[name='modelnumber']").val(modelnumber);
  var manufacturer = getUrlParameter('manufacturer');
  $("input[name='manufacturer']").val(manufacturer);
  var status = getUrlParameter('status');
  $("#status").val(status);
  var manage_ip = getUrlParameter('manage_ip');
  $("input[name='manage_ip']").val(manage_ip);
  var operation = getUrlParameter('operation');
  $("input[name='operation']").val(operation);
</script>
{% endblock %}
